<template>
  <d2-container>
    <div style="margin: 20px; width: 400px">
      <div style="margin: 20px 0">
        <span style="text-align: left; font-size: 28px; color: #1E90FF"><b>| </b></span>
        <span style="text-align: left; font-size: 22px"><b>数据集信息</b></span>
      </div>

      <el-form label-width="100px" size="large" :model="form" :rules="rules" ref="dataForm">
        <el-form-item label="数据集名称" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据类型">图片</el-form-item>
        <el-form-item label="数据集版本">V1.0</el-form-item>
        <el-form-item label="标注类型" prop="type">
          <el-select clearable v-model="form.type" placeholder="请选择" style="width: 50%">
            <el-option label="图像分类" value="0"></el-option>
            <el-option label="目标检测" value="1"></el-option>
            <el-option label="图像分割" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据集描述" prop="description">
          <el-input type="textarea" v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" autocomplete="off" @click="submit()">完成创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </d2-container>
</template>

<script>

import { AddObj } from './api.js'

export default {
  title: 'index',
  data () {
    return {
      form: {
        version: 'V1.0',
        creator_id: this.$store.state.d2admin.user.info.user_id
      },
      rules: {
        title: [
          { required: true, message: '请输入数据集名称', trigger: 'blur' },
          { min: 3, max: 20, message: '项目名称需要多于3个字符但不能超过20个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择标注类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 创建数据集
    submit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          AddObj(this.form).then(response => {
            this.$message.success('创建成功')
            this.$router.push({ path: '/data/my' })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  text-align: justify;
}
</style>
